<template>
  <div class="vipset">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="会员卡设置" name="vipset">
          <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
              <span>基础信息设置</span>
            </div>
          </div>
          <el-form ref="form" :model="form" label-width="180px">
            <!--            <el-form-item label="会员卡功能" :required='true'>-->
            <!--              <el-radio-group v-model="form.open">-->
            <!--                <el-radio label="1">开启</el-radio>-->
            <!--                <el-radio label="2">关闭</el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->
            <el-form-item label="名称" prop="title" :required="true">
              <el-input v-model="form.title" :maxlength="9" placeholder="请输入会员卡名称"></el-input>
              <div class="yb_margin lh16">会员卡名称,字数上限为9个字</div>
            </el-form-item>
            <el-form-item label="商户logo">
              <div class="uploadSource bor_de rel flex" v-if="form.logo">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.logo,1)"></i>
                </label>
                <img :src="form.logo" @click="test(1)" class="wid" />
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin">建议尺寸：300*300PX</div>
              <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
            </el-form-item>
            <el-form-item label="商户名称" prop="brandName" :required="true">
              <el-input v-model="form.brandName" :maxlength="12" placeholder="请输入商户名称"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡商户名称,字数上限为12个字</div>
            </el-form-item>
            <el-form-item label="小程序入口自定义名称" prop="xcxName" :required="true">
              <el-input v-model="form.xcxName" :maxlength="5" placeholder="请输入小程序入口自定义名称"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡小程序入口自定义名称,字数上限为5个字</div>
            </el-form-item>
            <el-form-item label="使用提醒" prop="notice" :required="true">
              <el-input v-model="form.notice" :maxlength="16" placeholder="请输入使用提醒"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡使用提醒,字数上限为16个字</div>
            </el-form-item>
            <el-form-item label="使用说明" prop="description" :required="true">
              <el-input v-model="form.description" :maxlength="1024" placeholder="请输入使用说明" type="textarea" rows="4"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡使用说明,字数上限为1024个字</div>
            </el-form-item>
            <el-form-item label="特权说明" prop="prerogative" :required="true">
              <el-input v-model="form.prerogative" :maxlength="1024" placeholder="请输入特权说明" type="textarea" rows="4"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡特权说明,字数上限为1024个字</div>
            </el-form-item>
            <el-form-item label="客服电话" prop="serviceTel" :required="true">
              <el-input v-model="form.serviceTel" placeholder="请输入客服电话"></el-input>
              <div class="yb_margin lh16">微信卡包会员卡客服电话</div>
            </el-form-item>
            <el-form-item label="会员说明" prop="content">
              <baidu-ueditor :content="form.content" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
            <el-form-item label="注册信息" :required="true">
              <el-checkbox-group v-model="form.register">
                <el-checkbox label="USER_FORM_INFO_FLAG_MOBILE" disabled>手机号</el-checkbox>
                <el-checkbox label="USER_FORM_INFO_FLAG_NAME">姓名</el-checkbox>
                <el-checkbox label="USER_FORM_INFO_FLAG_SEX">性别</el-checkbox>
                <el-checkbox label="USER_FORM_INFO_FLAG_BIRTHDAY">生日</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <div class="ba_f59 pad_20 flex-bet mar_t20">
              <div class>
                <div class="wei fon_14">同步发布至微信卡包</div>
                <div class="mar_t10">
                  如需要将此会员卡同步到微信卡包，需要先配置微信公众号；
                  <span class="subjectcolor2 curs" @click="ljpz">立即配置</span>
                </div>
              </div>
              <div class>
                <el-switch v-model="form.wechatCard" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="会员卡权益" name="interests">
          <div class="mar_t20">
            <el-button type="primary" size="medium" @click="handleEdit">新增权益</el-button>
          </div>
          <div class="tabledata mar_t20">
            <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" stripe style="width: 100%" @selection-change="setSelectRows">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="sort" label="排序"></el-table-column>
              <el-table-column prop="name" label="权益名称" width="390">
                <template slot-scope="scope">
                  <div class>{{scope.row.name}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="icon" label="权益图标">
                <template slot-scope="scope">
                  <div class="flex flex-y-top">
                    <img class="goodlogo bor_rad5" :src="scope.row.icon" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="启用状态">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="flex">
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c" v-show="activeName=='vipset'">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import Edit from './components/interestsedit';
import { getConfig, postConfig } from '@/api/setup';
import { rightsList, modifyRights } from '@/api/user';
import attachmentImg from '@/plugins/attachment-img';
import baiduUeditor from '@/plugins/baidu-ueditor';

export default {
  components: { Edit, attachmentImg, baiduUeditor },
  created() {
    if (this.activeName == 'vipset') {
      this.bus.$emit('loading', true);
      this.init();
    } else if (this.activeName == 'interests') {
      this.fetchData();
    }
  },
  data() {
    return {
      activeName: 'vipset',
      form: {
        title: '',
        brandName: '',
        logo: '',
        xcxName: '',
        notice: '',
        description: '',
        prerogative: '',
        serviceTel: '',
        content: '',
        register: ['USER_FORM_INFO_FLAG_MOBILE'],
        wechatCard: '2'
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      }
    };
  },
  methods: {
    handleTabClick() {
      if (this.activeName == 'vipset') {
        this.bus.$emit('loading', true);
        this.init();
      } else if (this.activeName == 'interests') {
        this.fetchData();
      }
    },
    async init() {
      const { data } = await getConfig({ ident: 'vipSet' });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    getUeditor(content) {
      this.form.content = content;
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.logo = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (!type) {
        switch (index) {
          case 1:
            this.form.logo = '';
            break;
        }
      }
    },
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await rightsList({ page: this.page.currentPage });
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row);
      } else {
        this.$refs['edit'].showEdit();
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await modifyRights({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyRights({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.ident = 'vipSet';
          this.form.identName = '会员卡设置';
          const { msg } = await postConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    },
    async changeSwitch(row) {
      const { msg } = await modifyRights({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    ljpz() {
      this.$router.push({ path: '/ptmsg' });
    }
  }
};
</script>
<style lang="scss">
</style>
